<template>
    <div>
        <AddCustomerContactsDialog
            ref="AddCustomerContactsDialog"
            :customer="addCustomerForm"
            :visible="addCustomerContactsVisible"
            :on-close="closeAddCustomerContacts"
            :callback="addCustomerContacts"
            :options="options"
        />
        <AddCustomerRelationshipDialog
            ref="AddCustomerRelationshipDialog"
            :customer="addCustomerForm"
            :visible="addCustomerRelationshipVisible"
            :on-close="closeAddCustomerRelationship"
            :callback="addCustomerRelationship"
            :options="options"
        />

        <el-dialog
            :fullscreen="fullscreen"

            :before-close="handleClose"
            :visible.sync="visible"
            @close="closeAddCustomer"
            width="80%"


        >
            <div slot="title">
                <div
                    style=" width:600px;display: flex;align-items: center;justify-content: space-between;border-bottom: #99a9bf 1px solid;padding-bottom: 10px">
                    <span style="font-weight: bold">Add new customer</span>
                    <div>
                        <el-button class="button2" size="small" type="primary" icon="el-icon-circle-plus-outline"
                                   @click="handleAddCustomer">Save
                        </el-button>
                        <el-button class="button3" size="small" @click="resetAddCustomer">Cancel</el-button>
                    </div>
                </div>


            </div>
            <div class="fullscreen" @click="onFullScreenClick">
                <i class="el-icon-full-screen"/>
            </div>
            <div style="padding-left: 20px;padding-right: 20px">
                <el-row :gutter="20" style="margin-top: -15px">
                    <el-col :span="10">
                        <span style="font-size: 18px;font-weight: bold">Customer Information</span>
                        <el-form ref="addCustomerForm"
                                 :model="addCustomerForm"
                                 :rules="addCustomerRules"
                                 size="medium"
                                 label-width="100px"
                                 label-position="left"
                                 style="margin-top: 15px">
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="Customer name" prop="customerName">
                                        <el-input v-model="addCustomerForm.customerName"
                                                  placeholder="Please input Customer name" clearable
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="Nation" prop="customerCountry">
                                        <el-select v-model="addCustomerForm.customerCountry"
                                                   placeholder="Please choose Nation"
                                                   filterable
                                                   clearable
                                        >
                                            <el-option v-for="(item, index) in options.customerCountryOptions"
                                                       :key="index"
                                                       :label="item.label"
                                                       :value="item.value" :disabled="item.disabled"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="City" prop="customerCity">
                                        <el-cascader v-model="addCustomerForm.customerCity"
                                                     :options="options.customerCityOptions"
                                                     placeholder="Please choose City"
                                                     filterable
                                                     clearable>
                                        </el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="Address" prop="customerAddress">
                                        <el-input v-model="addCustomerForm.customerAddress"
                                                  placeholder="Please input Address"
                                                  clearable
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="postCode" prop="postCode">
                                        <el-input v-model="addCustomerForm.postCode" placeholder="Please input postCode"
                                                  clearable
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="Url" prop="enterpriseUrl">
                                        <el-input v-model="addCustomerForm.enterpriseUrl" placeholder="Please input Url"
                                                  clearable
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="110px" label="taxId" prop="taxId">
                                        <el-input v-model="addCustomerForm.taxId" placeholder="Please input taxId"
                                                  clearable
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="taxType" prop="taxType">
                                        <el-select v-model="addCustomerForm.taxType" placeholder="Please choose taxType"
                                                   clearable
                                        >
                                            <el-option v-for="(item, index) in options.taxTypeOptions" :key="index"
                                                       :label="item.label"
                                                       :value="item.value" :disabled="item.disabled"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="accountGroup" prop="accountGroup">
                                        <el-select v-model="addCustomerForm.accountGroup"
                                                   placeholder="Please choose accountGroup"
                                                   filterable
                                                   clearable
                                        >
                                            <el-option v-for="(item, index) in options.accountGroupOptions" :key="index"
                                                       :label="item.label"
                                                       :value="item.value" :disabled="item.disabled"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="enterpriseProperty"
                                                  prop="enterpriseProperty">
                                        <el-select v-model="addCustomerForm.enterpriseProperty"
                                                   placeholder="Please choose enterpriseProperty"
                                                   filterable
                                                   clearable
                                        >
                                            <el-option v-for="(item, index) in options.enterprisePropertyOptions"
                                                       :key="index"
                                                       :label="item.label"
                                                       :value="item.value" :disabled="item.disabled"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" type="flex" justify="start" align="top">
                                <el-col :span="12">

                                    <el-form-item label-width="100px" label="annualSalesRevenue"
                                                  prop="annualSalesRevenue">
                                        <el-input v-model="addCustomerForm.annualSalesRevenue"
                                                  placeholder="Please input annualSalesRevenue"
                                                  clearable
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">

                                    <el-form-item label-width="115px" label="productType" prop="productType">
                                        <el-input v-model="addCustomerForm.productType"
                                                  placeholder="Please input productType"
                                                  clearable
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>

                                <el-form-item label-width="125px" label="softwareBrand" prop="softwareBrand">
                                    <el-input v-model="addCustomerForm.softwareBrand"
                                              placeholder="Please input softwareBrand" clearable
                                    ></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="note" prop="note">
                                    <el-input v-model="addCustomerForm.note" type="textarea"
                                              placeholder="Please input note"
                                              :autosize="{minRows: 3, maxRows: 5}"></el-input>
                                </el-form-item>
                            </el-row>

                        </el-form>
                    </el-col>
                    <el-col :span="14">
                        <div>
                            <div slot="header">
                                <span style="font-size: 18px;font-weight: bold">Customer Contacts</span>
                                <el-button class="button2" type="primary" icon="el-icon-circle-plus-outline"
                                           size="small"
                                           style="float: right; margin-bottom: 10px" @click="openAddCustomerContacts">
                                    Add
                                </el-button>
                            </div>
                            <el-table
                                :size="fullscreen?'':'small'"
                                :data="customerContactsTable"
                                ref="customerContactsTable">
                                <el-table-column
                                    prop="contactsId"
                                    label="Id"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsName"
                                    label="Name"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsDept"
                                    label="Dept"
                                    width="80">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsPosition"
                                    label="Position"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsTelephone"
                                    label="Telephone"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsMobilephone"
                                    label="Mobilephone"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsFax"
                                    label="Fax"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsEmail"
                                    label="Email"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsQq"
                                    label="QQ"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsWechat"
                                    label="Wechat"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    label="Operation"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            size="small"
                                            icon="el-icon-delete"
                                            type="danger"
                                            circle
                                            @click="handleDeleteCustomerContacts(scope.$index, scope.row)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                        <div style="margin-top: 80px">
                            <div slot="header">
                                <span style="font-size: 18px;font-weight: bold">Customer Relationship</span>
                                <el-button class="button2" type="primary" icon="el-icon-circle-plus-outline"
                                           size="small"
                                           style="float: right; margin-bottom: 10px"
                                           @click="openAddCustomerRelationship">Add
                                </el-button>
                            </div>
                            <el-table :data="customerRelationshipTable"
                                      ref="customerRelationshipTable">
                                <el-table-column
                                    prop="relativeCustomerId2"
                                    label="Id"
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    prop="relativeCustomerName"
                                    label="Related Customer Id"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="customerRelationName"
                                    label="Customer Relationship"
                                >
                                </el-table-column>
                                <el-table-column
                                    label="Operation"
                                    width="100"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            size="small"
                                            icon="el-icon-delete"
                                            type="danger"
                                            circle
                                            @click="handleDeleteCustomerRelationship(scope.$index, scope.row)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>


        </el-dialog>
    </div>

</template>

<script>


import AddCustomerContactsDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/AddCustomerContactsDialog";
import AddCustomerRelationshipDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/addCustomerRelationshipDialog";
import QS from "qs";

export default {
    name: "AddCustomerDialog",
    components: {AddCustomerRelationshipDialog, AddCustomerContactsDialog},
    props: ['visible', 'onClose', 'callback', 'options'],
    data() {
        return {
            //fullscreen
            fullscreen: false,

            //sub-dialog-visible
            addCustomerContactsVisible: false,
            addCustomerRelationshipVisible: false,

            addCustomerForm: {
                customerName: undefined,
                customerCountry: undefined,
                customerCity: undefined,
                customerAddress: undefined,
                postCode: undefined,
                enterpriseUrl: undefined,
                taxId: undefined,
                taxType: undefined,
                accountGroup: undefined,
                enterpriseProperty: undefined,
                annualSalesRevenue: undefined,
                productType: undefined,
                softwareBrand: undefined,
                note: undefined,

            },
            customerContactsTable: [],
            customerRelationshipTable: [],

            addCustomerRules: {
                customerName: [{
                    required: true,
                    message: 'Please input Customer name',
                    trigger: 'blur'
                }],
                customerCountry: [{
                    required: true,
                    message: 'Please choose Nation',
                    trigger: 'change'
                }],
                customerCity: [{
                    required: true,
                    message: 'Please choose City',
                    trigger: 'change'
                }],
                customerAddress: [{
                    required: true,
                    message: 'Please input Address',
                    trigger: 'blur'
                }],
                postCode: [{
                    required: true,
                    message: 'Please input postCode',
                    trigger: 'blur'
                }],
                enterpriseUrl: [{
                    required: true,
                    message: 'Please input Url',
                    trigger: 'blur'
                }],
                taxId: [{
                    required: true,
                    message: 'Please input taxId',
                    trigger: 'blur'
                }],
                taxType: [{
                    required: true,
                    message: 'Please choose taxType',
                    trigger: 'change'
                }],
                accountGroup: [{
                    required: true,
                    message: 'Please choose accountGroup',
                    trigger: 'change'
                }],
                enterpriseProperty: [{
                    required: true,
                    message: 'Please choose enterpriseProperty',
                    trigger: 'change'
                }],
                annualSalesRevenue: [{
                    required: true,
                    message: 'Please input annualSalesRevenue',
                    trigger: 'blur'
                }],
                productType: [{
                    required: true,
                    message: 'Please input productType',
                    trigger: 'blur'
                }],
                softwareBrand: [{
                    required: true,
                    message: 'Please input softwareBrand',
                    trigger: 'blur'
                }],
                note: [{
                    required: true,
                    message: 'Please input note',
                    trigger: 'blur'
                }],

            },
            customerCityProps: {
                "multiple": false,
                "label": "label",
                "value": "value",
                "children": "children"
            },
        }
    },

    methods: {


        handleAddCustomer() {

            this.$refs['addCustomerForm'].validate(valid => {
                if (!valid) return


                var cusData = JSON.parse(JSON.stringify(this.addCustomerForm));

                cusData.customerStatus = 10;
                cusData.customerMgrDept = this.$store.getters.getUser.userDeptId
                cusData.customerMgrName = this.$store.getters.getUser.username

                cusData.customerCity = JSON.stringify(cusData.customerCity)
                var addCon = {
                    customerId: null,
                    contactsList: this.customerContactsTable
                }
                var relData = this.customerRelationshipTable;
                for (var i = 0; i < this.customerRelationshipTable.length;i++) {
                    relData[i].relativeCustomerId1 = null
                }
                relData.relativeCustomerId1 = null;
                var data = JSON.parse(JSON.stringify({
                    customer: cusData,
                    customerContacts: addCon,
                    customerRelationship: relData,
                }))
                console.log('parse:', data)
                this.callback(data)
                this.$refs['addCustomerForm'].resetFields();
                this.customerContactsTable = undefined
                this.customerRelationshipTable = undefined
                this.closeAddCustomer();
                this.$message.success("Add success!")
            })
        },
        //
        onFullScreenClick() {
            this.fullscreen = !this.fullscreen
        },

        closeAddCustomer() {
            this.fullscreen = false
            this.onClose();
        },

        resetAddCustomer() {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?', {
                cancelButtonText: 'cancel',
                confirmButtonText: 'confirm'
            })
                .then(e => {
                    this.$refs['addCustomerForm'].resetFields();
                    this.closeAddCustomer()
                })
        },

        //customer-contacts
        //打开弹窗
        openAddCustomerContacts() {
            this.addCustomerContactsVisible = true
        },
        //关闭弹窗
        closeAddCustomerContacts() {
            this.addCustomerContactsVisible = false
        },
        //添加点击后回调函数
        addCustomerContacts(customerContacts) {
            this.customerContactsTable.push(customerContacts)
            this.$message.success("Add success!")
            console.log(customerContacts)
        },
        handleDeleteCustomerContacts(index, row) {
            this.$confirm('Are you sure you want to delete this customer contact?', 'Tips', {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                console.log(index, row);
                this.customerContactsTable.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: 'Delete success!'
                });
            })
        },

        //customer-relationship
        //打开弹窗
        openAddCustomerRelationship() {
            this.$refs.AddCustomerRelationshipDialog.init();
            this.addCustomerRelationshipVisible = true;
        },
        //关闭弹窗
        closeAddCustomerRelationship() {
            this.addCustomerRelationshipVisible = false
        },
        //弹窗点击添加后回调函数
        addCustomerRelationship(customerRelationship) {
            this.customerRelationshipTable.push(customerRelationship)
            this.$message.success("Add success!")
        },
        //点击表格中删除
        handleDeleteCustomerRelationship(index, row) {
            this.$confirm('Are you sure you want to delete this customer relationship?', 'Tips', {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                console.log(index, row)
                this.customerRelationshipTable.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: 'Delete success!'
                });
            })

        },
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?', {
                cancelButtonText: 'cancel',
                confirmButtonText: 'confirm'
            })
                .then(e => {
                    this.$refs['addCustomerForm'].resetFields();
                    this.closeAddCustomer()
                })
        },


    }
}
</script>


<style scoped>
.fullscreen {
    position: absolute;
    right: 50px;
    top: 18px;
    cursor: pointer;
    transition: all 200ms;
}

.fullscreen:hover {
    color: #6DBEF8;
}

</style>